<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑项目</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        .container { width: 90%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
    </style>
</head>
<body>
    <div class="container">
        <form id="projectForm" class="layui-form">
         <input type="hidden" name="id" value="{{ project.id }}">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required lay-verify="required|maxLength32" class="layui-input" value="{{ project.name }}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-inline">
                    <input type="text" id="abbr" name="abbr" class="layui-input" value="{{ project.abbr }}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前状态</label>
                <div class="layui-input-inline">
                    <select id="state" name="state" required lay-verify="required" class="layui-input">
                        <option value="待启动" {% if project.state == '待启动' %}selected{% endif %}>待启动</option>
                        <option value="分析中" {% if project.state == '分析中' %}selected{% endif %}>分析中</option>
                        <option value="已发布" {% if project.state == '已发布' %}selected{% endif %}>已发布</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" id="pm" name="pm" class="layui-input" value="{{ project.pm }}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">车型项目描述</label>
                <div class="layui-input-block">
                    <textarea name="project_desc" placeholder="项目详细说明" class="layui-textarea">{{ project.desc }}</textarea>
                </div>
            </div>
{#            <div class="layui-form-item">#}
{#                <div class="layui-input-block">#}
{#                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交</button>#}
{#                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>#}
{#                </div>#}
{#            </div>#}
        </form>
    </div>

    <script src="../../static/admin/layui2.9.13/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.render();

            form.verify({
                maxLength32: function(value) {
                    if (value.length > 32) {
                        return '项目名称长度不能超过32个字符';
                    }
                }
            });

            // 表单提交事件
            form.on('submit(formDemo)', function (data) {
                var name = document.getElementById('name').value;

                // 校验项目名称长度至少3个字符
                if (name.length < 3) {
                    layer.msg('项目名称长度至少3个字符');
                    return false;
                }

                // 使用fetch发送POST请求，确保只发送表单字段数据
                fetch('/edit_task', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data.field) // 只发送表单字段数据
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                    // 刷新父窗口的表格
                    parent.layui.table.reload('projectTable');
                    // 关闭当前页面
                    setTimeout(function() {
                        var index = parent.layer.getFrameIndex(window.name); // 获取当前窗口的索引
                        parent.layer.close(index); // 关闭当前窗口
                    }, 500); // 延迟关闭窗口
                })
                .catch(error => {
                    console.error('Error:', error);
                    layer.msg('提交失败，请重试');
                });
                return false; // 阻止表单默认提交行为
            });
        });
    </script>
</body>
</html>